<template>
  <div>
    <el-dialog
      :title="headerContent"
      :visible.sync="dialogVisible"
      width="500px"
      :before-close="handleClose">
      
      <!-- 具名插槽 -->
      <slot name="content"></slot>
      <!-- <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
      </span> -->
    </el-dialog>
  </div>
</template>
<script>
export default {
  props: {
    /**
     * @dialogVisible 是否显示
     * @headerContent 新增修改的内容
     */
    dialogVisible: {
      type: Boolean,
      default: false,
      require: true
    },
    headerContent: {
      type: String,
      default: "新增",
      require: false
    }
  },
  data() {
    return {
      // dialogVisible: false
    }
  },
  methods: {
    handleClose(val) {
      console.log(1)
      this.$emit("changeVisible",false)
    },
    
  }
}
</script>
<style lang="scss">
.el-input {
  width: 300px;
}
</style>